<template>
	<view class="dx-body">
		<dx-table
			ref="table"
			:header="tableHeader"
			:tableParams="tableParams"
			:buttons="['refresh', 'add', 'edit', 'del']"
			:isPagination="false"
		></dx-table>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick, provide } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { axios } from '@/uni_modules/dx-admin/api';
const tableHeader = reactive({
	tips: '城市管理',
});
const table = ref();
const tableParams = reactive({
	columnConfig: {
		resizable: true,
	},
	rowConfig: {
		isCurrent: false,
		isHover: true,
		keyField: '_id',
	},
	treeConfig: {
		transform: true,
		rowField: 'code',
		parentField: 'parent_code',
		reserve: true,
		lazy: true,
		hasChild: 'hasChild',
		loadMethod: function ({ row }: any) {
			// 异步加载子节点
			return new Promise((resolve) => {
				axios
					.send('city/list', 'dx-func-admin', {
						parent_code: row.code,
					})
					.then((res: any) => {
						console.log(row.type, 'row.type');
						resolve(
							res.data.map((item: any) => {
								return {
									...item,
									hasChild: row.type < 1,
								};
							})
						);
					})
					.catch(() => {
						resolve([]);
					});
			});
		},
	},
	checkboxConfig: { highlight: true },
	showOverflow: 'tooltip',
	urls: {
		index: 'city/list',
		add: 'city/add',
		edit: 'city/edit',
		del: 'city/del',
	},
	columns: [
		{ type: 'checkbox', width: '60px', operator: false },
		{
			label: '名称',
			field: 'name',
			align: 'left',
			minWidth: '180px',
			treeNode: true,
			rules: [
				{
					required: true,
					message: '城市名称不能为空',
				},
			],
		},
		{
			label: '父级code',
			field: 'parent_code',
			minWidth: '100px',
			component: {
				name: 'dx-select',
				props: {
					url: 'city/index',
					labelField: 'name',
					valueField: 'code',
					funcName: 'dx-func-admin',
				},
			},
		},
		{
			label: 'code',
			field: 'code',
			minWidth: '100px',
			rules: [
				{
					required: true,
					message: 'code不能为空',
				},
			],
		},
		{
			label: '首字母',
			field: 'first_letter',
			minWidth: '180px',
			rules: [
				{
					required: true,
					message: '首字母不能为空',
				},
			],
		},
		{
			label: '级别',
			field: 'type',
			width: '100px',
			formatter: ({ cellValue }: any) => {
				return ['省', '市', '区'][cellValue];
			},
			component: {
				name: 'el-select',
				options: [
					{ label: '省', value: 0 },
					{ label: '市', value: 1 },
					{ label: '区', value: 2 },
				],
			},
		},
		{
			label: '拼音',
			field: 'pinyin',
			width: '100px',
		},
		{
			label: '邮编',
			field: 'zip_code',
			minWidth: '180px',
		},
		// {
		// 	label: '创建时间',
		// 	field: 'create_date',
		//
		// 	form: false,
		// 	formatter: 'dxFormatDate',
		// 	width: '180px',
		// },
		{
			type: 'operate',
			label: '操作',
			align: 'left',
			width: '150px',
			fixed: 'right',
			operator: false,
			permission: ['dx-func-admin/city/edit', 'dx-func-admin/city/del'],
			buttons: ['edit', 'del'],
		},
	],
});
provide('onBeforeIndex', (params: any) => {
	// empty 空字符串 ''
	params.parent_code = ['is_empty', [null, 'exists', 'empty']];
	params.order = '_id';
	params.sort = 'asc';
	return params;
});
provide('onAfterIndex', (res: any) => {
	return res.map((item: any) => {
		return {
			...item,
			hasChild: true,
		};
	});
});
onLoad(() => {
	nextTick(() => {
		// 加载表单数据
		table.value?.getTableList();
	});
});
</script>

<style lang="scss"></style>
